<template>
	<view class="pageBg">
		<view class="tabBox">
			<fr-custom-tab :tabList="navList" tabKey="name" curLine="#E93323" curText="#111" textColor="#888" bg-color="#FFF" :margin-r="48" :pad="28" @handleClick="selectTab"></fr-custom-tab>
		</view>
		<view class="container">
			<scroll-view scroll-y="true"
			:scroll-top="scrollTop"
			@scrolltolower="scrolltolower"
			refresher-enabled="true"
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="refresherrefresh"
			@refresherrestore="refresherrestore"
			@refresherabort="refresherabort"
			:style="{
				height: scrollHeight + 'px',
				width: '750rpx'}"
			>
				<view class="inner">
					<view v-if="!lastPage" class="noData f_36 tc_c flex_c_c_c">
						<text class="iconfont iconnoData margin_b24" style="font-size:180rpx;"></text>
						<text>木有数据呢~~</text>
					</view>
					<block v-for="(item, index) in list" :key="item.uniquekey">
						<!-- 多图片 -->
						<view v-if="item.thumbnail_pic_s02" class="listItem_pics flex_c_fs_fs" @click.stop="checkNews(item)">
							<view class="title margin_b20">
								<text class="f_30 fw_600 tc_1 text_line_2">{{item.title}}</text>
							</view>
							<view class="imgList margin_b20 flex_r_fs_c">
								<image class="img margin_r12" :src="item.thumbnail_pic_s" mode="aspectFill"></image>
								<image class="img margin_r12" :src="item.thumbnail_pic_s02" mode="aspectFill"></image>
								<image class="img" :src="item.thumbnail_pic_s03" mode="aspectFill"></image>
							</view>
							<view class="footer f_22 fw_500 tc_9 flex_r_sb_c">
								<view class="flex_r_fs_c">
									<text class="margin_r16">{{item.category}}</text>
									<text>{{item.author_name}}</text>
								</view>
								<view class="flex_r_c_c">
									<text>{{item.date}}</text>
								</view>
							</view>
						</view>
						<!-- 单图片 -->
						<view v-else class="listItem" @click.stop="checkNews(item)">
							<view class="header margin_b20 flex_r_sb_fs">
								<view class="title">
									<text class="f_30 fw_600 tc_1 text_line_3">{{item.title}}</text>
								</view>
								<view class="imgList">
									<image class="img" :src="item.thumbnail_pic_s" mode="aspectFill"></image>
								</view>
							</view>
							<view class="footer f_22 fw_500 tc_9 flex_r_sb_c">
								<view class="flex_r_fs_c">
									<text class="margin_r16">{{item.category}}</text>
									<text>{{item.author_name}}</text>
								</view>
								<view class="flex_r_c_c">
									<text>{{item.date}}</text>
								</view>
							</view>
						</view>
					</block>
					<view v-if="noMore" class="noMore f_28 tc_c flex_r_c_c">
						<text>木有了呢~~(〃'▽'〃)</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sysInfo: this.$tool.sysInfo(),
				scrollHeight: '',
				navList: [
					{value: 'top', name: '热门'},
					{value: 'guonei', name: '国内'},
					{value: 'guoji', name: '国际'},
					{value: 'yule', name: '娱乐'},
					{value: 'tiyu', name: '体育'},
					{value: 'junshi', name: '军事'},
					{value: 'keji', name: '科技'},
					{value: 'caijing', name: '财经'},
					{value: 'shishang', name: '时尚'},
					{value: 'youxi', name: '游戏'},
					{value: 'qiche', name: '汽车'},
					{value: 'jiankang', name: '健康'},
				],
				curNav: {},
				curPage: 1, // 当前页数, 默认1, 最大50
				lastPage: 50, // 最后一页, 默认50,
				pageSize: 30, // 每页条数, 默认30, 最大30
				isFilter: 1, // 是否只返回有内容详情的新闻, 1 => 是, 默认0 => 否
				noMore: false, // 没有更多
				list: [],
				refresh: false,
				scrollTop: 0,
				refresherTriggered: false,
				_refresherTriggered: false
			};
		},
		onLoad(e) {
			this.setScrollHeight()
			this.curNav = this.navList[0]
			this.getData()
		},
		methods: {
			getData(isNextPage) {
				const _this = this
				this.curPage = isNextPage? ++this.curPage : 1
				
				const key = '8b99a148da67fea6e7f8c3f7966fad0f'
				const url = 'https://v.juhe.cn/toutiao/index'
				_this.$api.get({
					url: url,
					loadingTip: _this.refresh ? '获取数据中...' : '',
					data: {
						key: key,
						type: _this.curNav.value,
						page: _this.curPage,
						page_size: _this.pageSize,
						is_filter: _this.isFilter
					},
					success: res => {
						_this.list = isNextPage? [..._this.list, ...res.result.data] : res.result.data
						
						this.refresherTriggered = false
						this._refresherTriggered = false
					},
					fail: err => {}
				})
			},
			setScrollHeight() {
				let sys = uni.getSystemInfoSync()
				let wh = sys.windowHeight
				let hei = 44 + 8
				let topHei = Math.floor(this.sysInfo.rpx * hei * 2)
				let scrollHeight = wh - topHei
				this.scrollHeight = scrollHeight
			},
			scrolltolower() {
				if(this.lastPage === 0) {
					return
				}
				if(this.curPage !== this.lastPage) {
					this.getData(true)
				} else {
					this.noMore = true
				}
			},
			refresherrefresh() {
				// 自定义下拉刷新被触发
				let _this = this;
				if (_this._refresherTriggered) {
					return
				}
				_this._refresherTriggered = true;
				// 界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true
				}
				this.getData()
			},
			refresherrestore() {
				// 自定义下拉刷新被复位
				let _this = this
				_this.refresherTriggered = false
				_this._refresherTriggered = false
			},
			refresherabort() {
				// 自定义下拉刷新被中止
				let _this = this
				_this.refresherTriggered = false
				_this._refresherTriggered = false
			},
			selectTab(e) {
				this.curNav = e
				this.getData()
				this.scrollTop = 0
			},
			checkNews(e) {
				this.$tool.go('/pages/func/news/newsDetails?id=' + e.uniquekey)
			},
		},
	}
</script>

<style lang="scss" scoped>
.pageBg {
	.container {
		padding-top: 16rpx;
		box-sizing: border-box;
		.inner {
			padding: 0 28rpx;
			box-sizing: border-box;
			.listItem_pics {
				width: 100%;
				background-color: #FFF;
				padding: 20rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid #F8F8F8;
				.imgList {
					.img {
						width: 224rpx;
						height: 140rpx;
						border-radius: 16rpx;
					}
				}
				.footer {
					width: 100%;
				}
			}
			.listItem {
				width: 100%;
				background-color: #FFF;
				padding: 20rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid #F8F8F8;
				.header {
					.title {
						width: 440rpx;
					}
					.imgList {
						.img {
							width: 224rpx;
							height: 140rpx;
							border-radius: 16rpx;
						}
					}
				}
				.footer {
					width: 100%;
				}
			}
		}
	}
}
</style>
